<template>
  <div style="margin-left:10px">
    <div class="top-time-search">
      <el-date-picker
      v-model="startTime"
      type="month"
       placeholder="选择月"
       :default-value ="new Date()">
    </el-date-picker>
    </div>
    <el-tag style="margin-top:10px;" type="success" size='medium'>当前选择的月份11月,共30天,工作日22天</el-tag>
     <div style="margin-top:20px">
          <searchView style="margin-top:10px" :formOptions="searchFormData" v-on:onSearch="searchHandle"/>
    <el-table>
          <el-table-column
            prop="name"
            label="姓名"
            align="center"
          ></el-table-column>
             <el-table-column
            prop="age"
            label="工作天数"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="phone"
            label="正常打卡"
            align="center"
          ></el-table-column>
          <el-table-column prop="sex" label="迟到天数" align="center">
           
          </el-table-column>
          <el-table-column
            prop="age"
            label="旷工天数"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="idcard"
            label="早退天数"
            align="center"
          ></el-table-column>
              <el-table-column
            prop="idcard"
            label="请假天数"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="idcard"
            label="操作"
            align="center"
          >
           <template slot-scope="scope">
              <el-button
                icon="el-icon-edit"
                @click="editHandle(scope.row)"
                circle
              ></el-button>
              <el-button
                type="danger"
                @click="deleteHandle(scope.row)"
                icon="el-icon-delete"
                circle
              ></el-button>
            </template>
          </el-table-column>
    </el-table>
     <el-pagination
          class="page-bottom"
          :page-size="currentPageSize"
          layout="prev, pager, next, jumper, ->, total"
          :total="totalCount"
          :current-page.sync="currentPage"
          @current-change="currentPageChange"
        >
        </el-pagination>
    </div> 
  </div>
</template>
<script>
import searchView from "@/components/searchView";
export default {
  inject: ["reload"],
  data() {
    return {
      historyList:[
        {
          'time':'2021-11-20',
          'realnumber' : 40,
          'up' : 40,
          'down' : 30,
          'later' : 1,
          'extra' : 1,
          'holiday' : 0
        },
        {
          'time':'2021-11-21',
          'realnumber' : 40,
          'up' : 40,
          'down' : 30,
          'later' : 1,
          'extra' : 1,
          'holiday' : 0
        },
        {
          'time':'2021-11-22',
          'realnumber' : 40,
          'up' : 40,
          'down' : 30,
          'later' : 1,
          'extra' : 1,
          'holiday' : 0
        },
        {
          'time':'2021-11-23',
          'realnumber' : 40,
          'up' : 40,
          'down' : 30,
          'later' : 1,
          'extra' : 1,
          'holiday' : 0
        },
        {
          'time':'2021-11-24',
          'realnumber' : 40,
          'up' : 40,
          'down' : 30,
          'later' : 1,
          'extra' : 1,
          'holiday' : 0
        },
        {
          'time':'2021-11-25',
          'realnumber' : 40,
          'up' : 40,
          'down' : 30,
          'later' : 1,
          'extra' : 1,
          'holiday' : 0
        }
      ],
        startTime:'',
        endTime:'',
        searchFormData:[
        {
          label: '姓名',
          prop: 'name',
          element: 'el-input'
        },
         
        {
          label: '状态',
          prop: 'status',
          element: 'el-select',
          options:[
            { label: '正常', value: 0 },
            { label: '迟到', value: 1 },
            { label: '缺勤', value: 2 },
            { label: '请假', value: 3 },
            { label: '早退', value: 4 }
          ]
        }
      ],
      
      }
      
  },
  components:{
    searchView
  },
  methods:{
    searchRecords(){
      console.log(this.startTime);
    },
    searchHandle(){
        
    }
  }

 }

</script>
<style lang="less" scoped>
.record {
  font-weight: bold;
}
.top-time-search {
  display: flex;
  .el-button{
        margin:auto 20px;
  }
}

</style>